<template>
  <div class="plan-header">
    <h3 v-show="titleShow" class="title">{{title}}</h3>
    <div class="week2class" v-if="classBtnShow">
      <el-button @click="toClassPlan(item)" v-for="(item,index) in week2class" :key="index" size="mini" type="primary" :plain="item!=currentClassDate">{{dict_weekName[index+1]}}</el-button>
    </div>
    <div class="plan-body" :style="{backgroundColor: $store.state.user.baseColor}">
      <el-row type="flex">
        <el-col :span="titleShow?9:5"></el-col>
        <el-col :span="titleShow?14:18">
          <el-form ref="planForm" :model="planForm" label-width="80px" :rules="planFormRules" inline-message>
            <el-form-item label="标题" prop="name">
              <el-input v-model="planForm.name" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="日期范围" prop="doubleDate">
               <el-date-picker v-model="doubleDate" :readonly="docClassId==33||docClassId==34" type="daterange" align="right" unlink-panels style="width: 80%;"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange">
               </el-date-picker>
            </el-form-item>
            <el-form-item v-show="!management" label="运动项目">
              <el-select v-model="planForm.sportId" @change="sportChange" filterable clearable placeholder="请选择" style="width: 80%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sport" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="!management" label="运动小项">
              <el-select v-model="planForm.sportItemId" filterable clearable placeholder="请选择" style="width: 80%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sportItem" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="撰写者" prop="empId">
              <el-select v-model="planForm.empId" filterable clearable placeholder="请选择" style="width: 80%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_emp" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="!management||sportTeamYearPlanAndSummary?'撰写署名':'发布部门'" prop="docDataEmpId">
              <el-select v-model="planForm.docDataEmpId" multiple filterable clearable placeholder="请选择" style="width: 80%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_docDataEmp" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="撰写日期" prop="createDate">
              <div style="display: flex;justify-content: space-between;">
                <el-date-picker
                  v-model="planForm.createDate"
                  align="left"
                  type="date"
                  :clearable="false"
                  placeholder="选择日期" style="width: 80%;">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="titleShow?8:1"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {meta_sport_item,probeClassPlan} from "@/api/plan.js"
  export default {
    props: {
      tableData: {
        type: Object,
        default: {}
      },
      openDate: {
        type: String,
        default: ''
      },
      classBtnShow: {
        type: Boolean,
        default: false,
      },
      management: {
        type: Boolean,
        default: false
      },
      sportTeamYearPlanAndSummary: {
        type: Boolean,
        default: false
      },
      titleShow: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        doubleDate: [],
        planForm: {
          name: '',
          createDate: new Date(),
          sportId: '',
          sportItemId: '',
          empId: '',
          docDataEmpId: [],
        },
        title: '',
        tableHeader: [],
        dict_sport: {},
        dict_sportItem: {},
        dict_emp: {},
        dict_docDataEmp: {},
        docClassId: '',
        week2class: [],
        dict_weekName: {
          1:'一',
          2:'二',
          3:'三',
          4:'四',
          5:'五',
          6:'六',
          7:'日'
        },
        currentClassDate: '',
        planFormRules: {
          name: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
          doubleDate: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
          createDate: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
          empId: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
          docDataEmpId: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
        },
      }
    },
    watch: {
      tableData: {
        handler(newValue) {
          this.init_tableHeader(newValue)
        },
        deep: true
      }
    },
    created() {
      this.init_tableHeader()
    },
    methods: {
      dateChange(val) {
        this.$store.commit('user/SET_PLANDATE',this.doubleDate)
      },
      toClassPlan(item) {
        if(item==this.currentClassDate){
          return
        }
        let data = {
          parentId: this.tableData.parentId,
          openDate: item + ' 00:00:00'
        }
        probeClassPlan(data).then(res=>{
          if(res.code === 200 ) {
            if(res.data.length == 0){
              const { href } = this.$router.resolve({
                  path: '/classPlanCreateAndPreview',
                  query: {parentId:this.tableData.parentId,openDate:item}
              });
              window.open(href, '_blank');
            }else{
              const { href } = this.$router.resolve({
                  path: '/classPlanCreateAndPreview',
                  query: {docDataId:res.data[0].docDataId,parentId:res.data[0].parentId}
              });
              window.open(href, '_blank');
            }
          }else{
            this.$message.error(res.message)
          }
        })
      },
      getFirstLastDay (time) {
 　　　　let date = new Date(time)
        let Time = date.getTime()
        let day = date.getDay()
        let oneDayTime = 24*60*60*1000
        let arr = []
        if(day == 0){
          day = 7
        }
        for (var i = 1; i <= 7; i++) {
          arr.push(this.$moment(Time + (i - day) * oneDayTime).format('YYYY-MM-DD'))
        }
　　　　　return arr
      },
      init_tableHeader(newValue) {
        if(newValue){
          let tableHeader = newValue.tableHeader
          if(newValue.planTypeId == 33 || newValue.planTypeId == 34) {
            let date = []
            if(this.openDate){
              date = this.openDate.split('至')
            }else{
              date = tableHeader[1].content.split(',')
            }
            this.doubleDate = [date[0],date[1]]
            this.week2class = this.getFirstLastDay(date[0])
            this.docClassId = newValue.planTypeId
            if(newValue.planTypeId == 34){
              this.doubleDate = [date[0],date[0]]
              this.currentClassDate = date[0]
            }
          }else{
            this.doubleDate = [tableHeader[1].openDate,tableHeader[1].closeDate]
          }

          this.title = newValue.title.name
          // 处理标题
          this.planForm.name = tableHeader[0].content

          // 处理撰写日期
          if (tableHeader[6].defaultCreateDate == undefined) {
            this.planForm.createDate = this.$moment(new Date()).format("YYYY-MM-DD")
            // 课时计划默认课时当天
            if(this.docClassId == 34) {
              this.planForm.createDate = this.doubleDate[0]
            }
          } else {
            // this.planForm.createDate = this.$moment(new Date(tableHeader[6].defaultCreateDate)).format("YYYY-MM-DD")
            this.planForm.createDate = tableHeader[6].defaultCreateDate
          }

          // 处理运动项目
          this.dict_sport = tableHeader[2].content
          let defaultOption4sport = tableHeader[2].defaultOption
          if (defaultOption4sport == '' || defaultOption4sport == undefined || !this.dict_sport[defaultOption4sport]) {
            this.planForm.sportId = ''
          } else {
            this.planForm.sportId = defaultOption4sport+''
          }

          // 处理运动小项
          // this.dict_sportItem = tableHeader[3].content
          this.sportChange()
          let defaultOption4sportItem = tableHeader[3].defaultOption
          if (defaultOption4sportItem == '' || defaultOption4sportItem == undefined) {
            this.planForm.sportItemId = ''
          } else {
            this.planForm.sportItemId = defaultOption4sportItem+''
          }
          // if(this.dict_sportItem[this.planForm.sportItemId]){
          //   this.planForm.sportItemId = this.planForm.sportItemId==0?'':this.planForm.sportItemId
          // }else{
          //   this.planForm.sportItemId = ''
          // }
          // 处理撰写者
          this.dict_emp = tableHeader[4].content
          let defaultOption4emp = tableHeader[4].defaultOption
          if (defaultOption4emp == '' || defaultOption4emp == undefined) {
            this.planForm.empId = Object.keys(this.dict_emp)[0]
          } else {
            this.planForm.empId = defaultOption4emp+''
          }

          // 处理撰写署名或者发布部门
          this.dict_docDataEmp = tableHeader[5].content
          let defaultOption4docDataEmp = tableHeader[5].defaultSigners
          if (defaultOption4docDataEmp == '' || defaultOption4docDataEmp == undefined) {
            this.planForm.docDataEmpId = [Object.keys(this.dict_docDataEmp)[0]]
          } else {
            this.planForm.docDataEmpId = defaultOption4docDataEmp.split(',')
            this.planForm.docDataEmpId.forEach((item,index)=>{
              if(!this.dict_docDataEmp[item]) {
                this.planForm.docDataEmpId.splice(index,1)
              }
            })
          }
          this.$forceUpdate()
          this.$store.commit('user/SET_PLANFORM',this.planForm)
          this.$store.commit('user/SET_PLANDATE',this.doubleDate)
        }
      },
      sportChange(val) {
        this.planForm.sportItemId = ''
        meta_sport_item(val||this.planForm.sportId).then(res=>{
          if(res.code === 200 && res.data.length != 0){
            let dict = {}
            res.data.forEach(item=>{
              dict[item.sportItemId] = item.name
            })
            this.dict_sportItem = dict
          }else{
            this.dict_sportItem = {}
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .plan-header{

    .title{
      text-align: center;
    }
    .week2class{
      text-align: center;
      background-color: #f6f6f6;
      padding: 10px 0;
    }
    .plan-body{
      background-color: #FFFFFF;
      padding: 20px 20px;
    }
  }
</style>
